<template>
  <div class="container">
    <div class="title">温湿度管理</div>
    <div class="content-container">
      <div class="legend-container" style="margin-top: 20px;">
        <div class="circle" style="margin-right: 5px;background-color: #FBBB76;"></div>
        最高温度
        <div class="circle" style="margin-right: 5px;margin-left: 10px;background-color: #FBBB76;"></div>
        最低温度
      </div>
      <div class="chart" ref="chartTemper"></div>
      <div class="max-min-container">
        最高温度 <span style="color: #FBBB76;margin-right: 6px;">{{maxTemper}}°C</span> 最低温度 <span style="color: #56D9FF">{{minTemper}}°C</span>
      </div>
      <div class="legend-container" style="margin-top: 20px;">
        <div class="circle" style="margin-right: 5px;background-color: #8376FB;"></div>
        最高湿度
        <div class="circle" style="margin-right: 5px;margin-left: 10px;background-color: #E55353;"></div>
        最低湿度
      </div>
      <div class="chart" ref="chartHumidity"></div>
      <div class="max-min-container">
        最高湿度 <span style="color: #FBBB76;margin-right: 6px;">{{maxHumidity}}</span> 最低湿度 <span style="color: #56D9FF">{{minHumidity}}</span>
      </div>
    </div>
  </div>
</template>

<script>

  import $ from 'jquery'
  import _ from 'lodash'
  import * as Constant from './common/Constant';

  import echarts from 'echarts';
  import highcharts from 'highcharts'

  import chartConfig from './chartConfig/Humiture';

    export default {
        name: 'Humiture',
        data() {
            return {
              chartDataTemper:{},
              chartTemper:null,
              chartDataHumidity:{},
              chartHumidity:null,
            }
        },
        computed: {
          maxTemper(){
            if(this.chartDataTemper.series){
              let all = this.chartDataTemper.series[0].data.concat(this.chartDataTemper.series[1].data);
              return _.max(all)
            }
          },
          minTemper(){
            if(this.chartDataTemper.series){
              let all = this.chartDataTemper.series[0].data.concat(this.chartDataTemper.series[1].data);
              return _.min(all)
            }
          },
          maxHumidity(){
            if(this.chartDataHumidity.series){
              let all = this.chartDataHumidity.series[0].data.concat(this.chartDataHumidity.series[1].data);
              return _.max(all)
            }
          },
          minHumidity(){
            if(this.chartDataHumidity.series){
              let all = this.chartDataHumidity.series[0].data.concat(this.chartDataHumidity.series[1].data);
              return _.min(all)
            }
          },
        },
        methods: {
          getData(){
            let me = this;
            let configDataTemper = {
              legend: ["最高温度",'最低温度'],
              xAxis:['1区','2区','3区'],
              data:[],
              colors: ['#FBBB76','#56D9FF'],
            }
            let configDataHumidity={
              legend:['最高湿度','最低湿度'],
              xAxis:['1区','2区','3区'],
              data:[],
              colors: ['#8376FB','#E55353'],
            }

            if(Constant.LOCAL){
              configDataTemper.data = [
                configDataTemper.xAxis.map(()=>{
                  return _.random(10,100);
                }),
                configDataTemper.xAxis.map(()=>{
                  return _.random(10,100);
                }),
              ]
              configDataHumidity.data=[
                configDataHumidity.xAxis.map(()=>{
                  return _.random(10,100);
                }),
                configDataHumidity.xAxis.map(()=>{
                  return _.random(10,100);
                }),
              ]
              me.chartDataTemper = chartConfig.getConfigHcharts(configDataTemper.legend, configDataTemper.xAxis, configDataTemper.data, configDataTemper.colors)
              me.chartDataHumidity = chartConfig.getConfigHcharts(configDataHumidity.legend, configDataHumidity.xAxis, configDataHumidity.data, configDataHumidity.colors)
              me.updateChart();
            }else{
              $.get(Constant.HOST+'url',data=>{
                // 根据返回数据设置温度、湿度值
                configDataTemper.data = data
                me.chartDataTemper = chartConfig.getConfig(configDataTemper.legend, configDataTemper.xAxis, configDataTemper.data, configDataTemper.colors);
                me.updateChart();
              }).fail(()=>{
                setTimeout(me.getData, Constant.INTERVAL*1000);
              })
            }
          },
          updateChart(){
            let me = this;
            if(!this.chartTemper){
              this.chartTemper = highcharts.chart(this.$refs.chartTemper, this.chartDataTemper)
            }else{
              this.chartTemper.series[0].setData(this.chartDataTemper.series[0].data)
            }
            if(!this.chartHumidity){
              this.chartHumidity = highcharts.chart(this.$refs.chartHumidity, this.chartDataHumidity)
            }else{
              this.chartHumidity.series[0].setData(this.chartDataHumidity.series[0].data)
            }
            setTimeout(me.getData, Constant.INTERVAL*1000);
          },
        },
        mounted() {
          let me = this;
          this.getData();
        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>
  .content-container
    display: flex;
    flex-direction: column;
  .chart
    flex: 1;
    width: 100%;
  .max-min-container
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0.1px;
    text-align: center;
    margin-bottom: 5px;
  .legend-container
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0.1px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 14px;
  .circle
    width: 8px;
    height: 8px;
    border-radius: 50%;
</style>
